<template>
  <view class="search">
    <u-sticky bg-color="#f7f7f7">
      <view class="header_warp flex_b">
        <view class="input_warp">
          <input
            type="text"
            class="search_input"
            placeholder="请输入搜索内容"
            v-model="searchVal"
            :focus="focus"
            ref="searchRef"
          />
          <view
            class="clear_val iconfont icon-clear"
            v-if="showClear"
            @click="clearVal"
          ></view>
        </view>
        <view class="search_btn flex_c" @click="searchSubmit">搜索</view>
      </view>
      <view class="choose_warp">
        <u-dropdown @open="openDropdown" @close="closeDropdown" ref="uDropdown">
          <u-dropdown-item
            v-for="(item, index) in list"
            :key="index"
            v-model="values[index]"
            :title="item"
            :options="options"
            @change="dropdownItemChange"
          ></u-dropdown-item>
        </u-dropdown>
      </view>
    </u-sticky>
    <view class="content_warp">
      <course-card v-for="item in showList.list" :key="item.id" :item="item" />
    </view>
    <u-loadmore :status="status" />
    <bottom-safety />
  </view>
</template>

<script>
import { coursePackageList } from "@/api/course";
export default {
  data() {
    this.options1 = [
      {
        label: "精品课程",
        value: 1,
      },
      {
        label: "推荐课程",
        value: 2,
      },
      {
        label: "专项课程",
        value: 3,
      },
      {
        label: "免费课程",
        value: 4,
      },
    ];
    this.options2 = [
      {
        label: "点播",
        value: 1,
      },
      {
        label: "直播",
        value: 2,
      },
      {
        label: "随身听",
        value: 3,
      },
    ];
    this.options3 = [
      {
        label: "供应链管理",
        value: 1,
      },
      {
        label: "物流",
        value: 2,
      },
    ];
    this.oldList = ["智能筛选", "课程", "关键词"];
    this.params = {};
    return {
      searchVal: "",
      focus: false,
      values: [0, 0, 0],
      list: ["智能筛选", "课程", "关键词"],
      options: [],
      dropdownIndex: "", // 当前点击的哪一项
      pageSize: 20,
      pageNum: 1,
      showList: {
        list: [],
        total: 0,
      },
      status: "loading",
    };
  },
  onLoad(params) {
    this.params = params;
    const keys = Object.keys(params);
    if (keys.length === 1) {
      const key = keys[0];
      if (key === "type") {
        this.dropdownIndex = 0;
        this.options = this["options1"];
      } else if (key === "playType") {
        this.dropdownIndex = 1;
        this.options = this["options2"];
      }
      this.dropdownItemChange(params[key]);
    } else {
      this.params = params;
      this.coursePackageList();
    }
  },
  onReachBottom() {
    this.coursePackageList();
  },
  methods: {
    // 清空输入框
    clearVal() {
      this.searchVal = "";
      this.focus = true;
    },
    // 点击搜索
    searchSubmit() {
      this.initParams();
      this.coursePackageList();
    },
    // 初始化展示数据
    initParams() {
      this.pageNum = 1;
      this.showList = {
        list: [],
        total: 0,
      };
    },
    // 点击筛选
    openDropdown(e) {
      this.dropdownIndex = e;
      this.options = [];
      this.params = {};
      this.options = this["options" + (e + 1)];
      this.$refs.uDropdown.highlight();
    },
    closeDropdown(e) {
      this.$refs.uDropdown.highlight(this.dropdownIndex);
    },
    dropdownItemChange(e) {
      const { dropdownIndex, list, oldList, options } = this;
      list.forEach((v, i) => {
        if (i === dropdownIndex) {
          console.log(options[e - 1].label);
          list[i] = options[e - 1].label;
        } else {
          list[i] = oldList[i];
        }
      });
      this.list = list;
      let params = {};
      if (dropdownIndex === 0) {
        params.type = e;
      } else if (dropdownIndex === 1) {
        params.playType = e;
      } else {
        this.searchVal = options[e - 1].label;
      }
      this.params = params;
      this.initParams();
      this.coursePackageList();
    },
    // 发送请求
    coursePackageList() {
      const { pageSize, pageNum, searchVal, showList, params } = this;
      if (pageNum !== 1) {
        if (!this.hasMore) return;
      }
      this.status = "loading";
      params.pageSize = pageSize;
      params.pageNum = pageNum;
      params.name = searchVal;
      params.loading = false;
      coursePackageList(params)
        .then((res) => {
          showList.list = [...showList.list, ...res.list];
          showList.total = res.total;
          this.pageNum++;
          if (this.hasMore) {
            this.status = "loading";
          } else {
            this.status = "nomore";
          }
        })
        .catch((err) => {});
    },
  },
  watch: {
    searchVal: function (newVal, oldVal) {
      if (newVal === "" && oldVal !== "") {
        this.params = {};
        this.$refs.uDropdown.highlight();
        this.initParams();
        this.list = this.oldList;
        this.coursePackageList();
      }
    },
  },
  computed: {
    showClear() {
      return this.searchVal.length > 0 ? true : false;
    },
    hasMore() {
      return this.showList.total > this.pageSize * (this.pageNum - 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  background: #f5f5f5;
  width: 100%;
  .header_warp {
    padding: 15upx 0 15upx 30upx;
    width: 100%;
    background: #f7f7f7;
    .input_warp {
      flex: 1;
      position: relative;
      .search_input {
        width: 100%;
        height: 60upx;
        background-color: #fff;
        border-radius: 25upx;
        padding-left: 20upx;
      }
      .clear_val {
        position: absolute;
        font-size: 40upx;
        right: 10upx;
        top: 10upx;
      }
    }

    .search_btn {
      width: 120upx;
      height: 100%;
      margin-left: 10upx;
      font-size: 28upx;
    }
  }
  .choose_warp {
    width: 100%;
    height: 80upx;
    background-color: #fff;
  }
  .content_warp {
    padding: 20upx 30upx 0;
  }
}
/deep/ .u-flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
